<template>
    <div>
        <div class="banxin banner">
                <img src="../assets/images/home/banner.png" alt="">
            </div>
        <div class="bg">
            <Title :src="Recommend" title="精品推荐" />
        <Product :AllInfo="listInfo"/>
        <!-- <List :AllInfo="listInfo"/> -->
        <Title :src="Hot" title="热门兑换" />
        <img src="../assets/images/home/ad.png" alt="" class="ad banxin">
        <Product :AllInfo="hotListInfo"/>
        <!-- <List :AllInfo="hotListInfo"/> -->
        </div>
        <Title :src="Integral" title="积分攻略" />
        <ul class="banxin tanxin jifen">
            <li>
                <h4>签到得积分</h4>
                <div class="btn">去签到</div>
            </li>
            <li>
                <h4>签到得积分</h4>
                <div class="btn">去签到</div>
            </li>
            <li>
                <h4>签到得积分</h4>
                <div class="btn">去签到</div>
            </li>
            <li>
                <h4>签到得积分</h4>
                <div class="btn">去签到</div>
            </li>
        </ul>
    </div>
</template>

<script>
import Title from"@/components/home/Title.vue"
import List from "@/components/home/List.vue"
import Product from "@/components/Product.vue"
import { GetJingPingData , ReMwnData } from "../request/api"
export default {
    data () {
        return {
            Recommend:require('../assets/images/home/Recommend.png'),
            Hot:require('../assets/images/home/hot.png'),
            Integral:require('../assets/images/home/integral.png'),
            listInfo:[],
            hotListInfo:[]

        }
    },
    components:{
        Title,
        List,
        Product
    },
    created() {
        GetJingPingData().then((res) => {

            if (res.data.code === 0) {
                this.listInfo = res.data.data.data.records
            } else {
                alert(res.data.msg)
            }
        })
        ReMwnData().then((res) => {
            // console.log(res);
            if (res.data.code === 0) {
                this.hotListInfo = res.data.data.data.records
            } else {
                alert(res.data.msg)
            }
        })
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.ad{
    display: block;
    margin-bottom: 30px;
}
    .bg{
        background: #F5F5F5;
    }
    .jifen{
        li{
            width: 285px;
            height: 168px;
            color: #fff;
            margin-bottom: 47px;
            padding-left: 20px;
            padding-top: 43px;
            box-sizing: border-box;
            background-size: 100%;
            transition: all 0.5s linear;
            h4{
                font-size: 24px;
                color: #fff;
                margin-bottom: 20px;
            }
            .btn{
                width: 96px;
                height: 27px;
                border: 1px solid #fff;
                text-align: center;
                line-height: 27px;
            }
            &:nth-of-type(1){
                background-image: url(../assets/images/home/integral-01.png);
            }
            &:nth-of-type(2){
                background-image: url(../assets/images/home/integral-02.png);
            }
            &:nth-of-type(3){
                background-image: url(../assets/images/home/integral-03.png);
            }
            &:nth-of-type(4){
                background-image: url(../assets/images/home/integral-04.png);
            }
            &:hover{
                background-size: 105%;
                // transform: rotateZ(360deg) scale(1.5);

            }
        }
    }
    .banner{
        margin-top: 30px;
    }
</style>